﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Shopping cart.aspx.cs" Inherits="GoShopping.Shopping_cart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
    <link href="./Content/css/Shopping%20cart.css" rel="stylesheet" />
    <script src="./Content/js/vue.js"></script>
    <script src="./Content/js/jquery-1.10.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .deldete:hover {
            color: #00CBFD;
            font-size: 20px
        }

        h1 {
            font-size: 30px;
            font-weight: 400;
            line-height: 68px;
            color: #757575;
        }

        .address_box {
            background-color: white;
            width: 80%;
            margin: 50px auto;
            height: 500px;
            padding: 50px;
        }

        .address_add {
            text-align: center;
            line-height: 178px;
            font-size: 40px
        }

        .address_list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .address_item, .address_add {
            width: 268px;
            height: 178px;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            position: relative;
            margin-right: 17px;
            margin-bottom: 20px;
        }

        .address_info {
            line-height: 22px;
            color: #757575;
            padding: 15px 24px 0;
        }

        .address_action {
            display: inline-block;
            cursor: pointer;
            position: absolute;
            right: 20px;
            bottom: 20px
        }

        .address_moren {
            display: inline-block;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 20px;
            font-size:30px;
            color: #00CBFD
        }

        .address_item:hover, .address_add:hover {
            border: 2px solid #00CBFD
        }

            .address_item:hover .address_action {
                display: block;
                font-size: 20px;
                color: #00CBFD
            }

        .el-icon-circle-plus-outline:hover {
            color: #00CBFD
        }

        .address_action {
            display: none
        }

        .set {
            width: 110px;
            height: 25px;
            line-height: 25px;
            border: 1px solid #e0e0e0;
            text-align: center;
            cursor: pointer;
            color: #757575;
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translate(-50%, 0);
            display: none
        }

        .address_item:hover .set {
            display: block;
            border: none;
            background-color: #00CBFD;
            color: white
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="header">
            <div class="header-logo">
                <img src="images/Logo.png" />
            </div>
            <div class="header-title">
                <h2>我的购物车</h2>
                <p>温馨提示：产品是否购买成功，以最终下为准哦，请尽快结算</p>
            </div>
            <div class="flex"></div>
            <div class="topbar-info">
                <a href="OrdersWeb.aspx">我的订单</a>
            </div>
        </div>
        <div class="container" v-if="this.carList.length>0">
            <div class="content">
                <table>
                    <tr class="header-tr">
                        <td class="checkbox" v-if="allCheck==carList.length">
                            <input type="checkbox" name="" checked="checked" @click="allCheckbtn" /><span>全选</span>
                        </td>
                        <td class="checkbox" v-else>
                            <input type="checkbox" name="" @click="allCheckbtn"/><span>全选</span>
                        </td>
                        <td style="width: 600px">商品</td>
                        <td>单价</td>
                        <td style="width: 400px">数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>

                    <tr class="content-tr" v-for="(item,index) in this.carList">
                        <td class="checkbox">
                            <input type="checkbox"  :checked="item.check" v-on:click="checkbtn(index)" />
                            
                            
                        </td>
                        <td class="goods">
                            <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`"><img :src="item.GoodsPic" alt="" /></a>
                            
                            <div class="dic" style="text-align:center;width:400px">{{item.GoodsName}}</div>

                        </td>
                        <td class="price">￥{{item.GoodsPrice}}</td>
                        <td class="count" style="width: 400px;">
                            <div class="count-div">
                                <span class="reduce span" style="font-size: 20px; font-weight: bolder;cursor: pointer" @click="subNum(index)">-</span>
                                <input type="text" :value="item.Num" class="count-input"  />
                                <span class="add span" style="font-size: 20px; font-weight: bolder;cursor: pointer" @click="addNum(index)">+</span>
                            </div>
                        </td>
                        <td class="subtoral" style="color: #00CBFD">￥{{item.GoodsPrice*item.Num}}</td>
                        <td class="operation">
                            <span class="deldete">
                                <i style="cursor: pointer" class="el-icon-delete" type="primary" @click="del(item.CarID)"></i>
                            </span>

                        </td>
                    </tr>

                </table>

                <div class="foot">
                    <div>
                        <a href="Index.aspx">继续购物</a>
                        <span>&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp</span>已选择<span class="foot-color" style="font-size: 25px">{{allNum}}</span>件
                    </div>
                    <div class="flex"></div>
                    <div class="foot-color">合计：<span class="foot-price">{{allPrice}}</span>元</div>
                    <div class="pay" style="cursor: pointer;" @click="openDialog">去结账</div>
                </div>



            </div>
        </div>
         <div v-else>
            <el-empty description="您的购物车还没有商品哦~"></el-empty>
         </div>
        <div class="content-list">
            <h2 class="recommend-title" style="margin: 100px 0px">
                <span>火爆商品~</span>
            </h2>
            <ul class="recommend-list">

                <li v-for="item in goodsXinxi">
                    <a href="#">
                        <div class="recommend-img">
                            <img :src="item.GoodsPic" alt="" />
                        </div>
                        <div class="recommend-name">{{item.GoodsName}}</div>
                        <div class="recommend-price">￥{{item.GoodsPrice}}</div>
                        <div class="recommend-tips">------</div>
                    </a>
                    <a :href="`GoodsDetail.aspx?GoodsID=${item.GoodsID}`" class="fudong">进入详情</a>
                </li>

            </ul>
        </div>


    <el-dialog title="选择收货地址" :visible.sync="dialogVisible" width="80%">
<div class="address_list">
    <div class="address_add">
        <i class="el-icon-circle-plus-outline" @click="dialogVisible2 = true"></i>
    </div>
    <div class="address_item" v-for="(item,index) in addressList" @click="selectAddress(index)">

        <div class="address_info">
            <div class="address_name">{{item.Name}}</div>
            <div class="address_tel">{{item.Phone}}</div>
            <div class="address_icon">{{item.AddressU}}</div>
        </div>
        <div 
            :class="{'address_moren':isvisited==index}" 
            style="display: inline-block;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 20px;
            font-size:30px;" >
            <i class="el-icon-success"></i>
        </div>
    </div>
</div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMit">提交订单</el-button>
    </span>
   </el-dialog>


    </form>
</body>
</html>
<script type="module">
    import { sendAjaxUrl1 } from './Content/js/FactoryVue.js'
    import { sendAjaxCar1 } from './Content/js/FactoryCar.js'
    new Vue({
        el: "#form1",
        data: {
            AddresssName: '',
            AddressPhone: '',
            Address: '',
            isvisited:-1,
            addressList: [],
            dialogVisible2: false,
            dialogVisible: false,
            carList: [],
            allNum: 0,
            allPrice: 0,
            allCheck: 0,
            obj: {
                url: '',
                tyID:''
            },
            dataa: {
                caozuo: null,
                tyID: null
            },
            obj2: {
                url: '',
                type: ''
            },
            data1: {},
            goodsXinxi:[]//获取前十条信息
        },
        async created() {
            var that = this;
            that.obj.url = 'tools/Goods.ashx'
            that.obj.tyID = 99
            await sendAjaxUrl1(that.obj).then(res => {
                this.goodsXinxi = res.res
            })
            if (sessionStorage.getItem("UserID") != null) {
                that.obj.url = 'tools/Car.ashx'
                that.obj.tyID = sessionStorage.getItem("UserID")
                await sendAjaxUrl1(that.obj).then(res => {
                    this.carList = res.res
                })
            }
            
        },
        methods: {
            //打开选择地址弹窗
            async openDialog() {
                var SelectedCar = this.carList.filter(item => {
                    return item.check == true
                })
                if (SelectedCar.length > 0) {
                    this.dialogVisible = true
                    var that = this
                    that.obj2.url = "tools/Addressds.ashx"
                    that.obj2.type = "POST"
                    that.data1.UserID = sessionStorage.getItem("UserID")
                    that.data1.t = "0"
                    await sendAjaxCar1(that.obj2, that.data1).then(res => {
                        if (res.status != "没有记录！") {
                            that.addressList = res.res
                        }
                    })
                } else {
                    this.$message({
                        message: '请选中需要购买的商品哦~！',
                        type: 'warning'
                    });
                }
            },
            //点击选择地址，改变样式以及获取数据
            selectAddress(index) {
                this.isvisited = index
                this.AddressPhone = this.addressList[index].Phone
                this.AddresssName = this.addressList[index].Name
                this.Address = this.addressList[index].AddressU
                
            },
            //提交订单
            subMit() {
                if (this.AddressPhone != '' && this.AddresssName != '' && this.Address != '') {
                    this.pay()
                } else {
                    this.$message({
                        message: '请选择收货地址哦~！',
                        type: 'warning'
                    });
                }
            },

            //支付
            async pay() {
                //筛选已勾选的商品
                var SelectedCar = this.carList.filter(item => {
                    return item.check == true
                })
                if (SelectedCar.length > 0) {
                    console.log(SelectedCar)
                    //重新组成订单数组信息上传
                    var newOrder = SelectedCar.map(item => {
                        return {
                            UserID: item.UserID,
                            GoodsID:item.GoodsID,
                            Num: item.Num,
                            Address: this.Address,
                            OrderMoney: item.Num * item.GoodsPrice,
                            t: "0",
                            CarID: item.CarID,
                            AddressName: this.AddresssName,
                            AddressPhone: this.AddressPhone
                        }
                    })
                    var that = this
                   
                    console.log(newOrder)
                    for await (let item of newOrder) {
                        that.data1 = item
                        that.obj2.type = "POST"
                        that.obj2.url = "tools/Orderds.ashx"
                        console.log(that.data1)
                        await sendAjaxCar1(that.obj2, item).then(res => {
                            console.log(res)
                            if (res.status =="支付成功！") {
                                that.del1(that.data1.CarID)
                                that.dialogVisible = false
                            }
                        })
                    }
                    this.$message({
                        message: '订单提交成功，可以到我的订单查询详细信息哦~',
                        type: 'success'
                    });
                    //for (var i = 0; i < newOrder.length; i++) {
                    //    that.data1 = newOrder[i]
                    //    that.obj2.type = "POST"
                    //    that.obj2.url = "tools/Orderds.ashx"
                    //    await sendAjaxCar1(that.obj2, that.data1).then(res => {
                    //        that.del1(newOrder[i].CarID)
                    //    })
                    //    if (i == newOrder.length-1) {
                    //        this.$message({
                    //            message: '支付成功，可以到我的订单查询详细信息哦~',
                    //            type: 'success'
                    //        });
                    //    }
                    //}
                    
                } else {
                    this.$message({
                        message: '请选中需要购买的商品哦~！',
                        type: 'warning'
                    });
                }
            },
            //删除
            async del(CarID) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.del1(CarID)
                }).catch(() => {
                    //this.$message({
                    //    type: 'info',
                    //    message: '已删除'
                    //});
                });
            },
            async del1(CarID) {
                console.log(CarID)
                var that = this
                that.obj2.url = 'tools/Car1.ashx'
                that.obj2.type = "GET"
                that.dataa.tyID = CarID
                that.dataa.caozuo = "删"
                await sendAjaxCar1(that.obj2,that.dataa).then(res => {
                    if (res.status == "删除成功！")
                    {
                        //无感操作，前端直接删除数据，后端进行，无需刷新页面
                        that.carList = that.carList.filter(item => {
                            return item.CarID != CarID
                        })
                        
                    }
                })
            },
            //增加数量
            addNum(i) {
                this.carList[i].Num++
                this.getAllNum()
                this.getAllprice()
            },
            //减少数量
            subNum(i) {
                if (this.carList[i].Num == 1) {
                    return
                }
                this.carList[i].Num--
                this.getAllNum()
                this.getAllprice()
            },
            //普通按钮
            checkbtn(i) {
                this.carList[i].check = !this.carList[i].check
                if (this.carList[i].check) {
                    this.allCheck++

                } else {
                    this.allCheck--
                    
                }
                this.getAllNum()
                this.getAllprice()
            },
            //获取数量
            getAllNum() {
                var num = 0;
                for (var i = 0; i < this.carList.length; i++) {
                    if (this.carList[i].check == true) {
                        num += parseInt(this.carList[i].Num)
                    }
                    this.allNum = num;
                }
            },
            //获取总价格
            getAllprice() {
                var price = 0;
                for (var i = 0; i < this.carList.length; i++) {
                    if (this.carList[i].check == true) {
                        price += parseInt(this.carList[i].GoodsPrice * this.carList[i].Num)
                    }
                    this.allPrice = price;
                }
            },
            //全选按钮
            allCheckbtn(e) {
                console.log(e)
                if (e.target.checked) {
                    for (var i = 0; i < this.carList.length; i++) {
                        this.carList[i].check = true
                        this.getAllNum()
                        this.getAllprice()
                    }
                } else {
                    for (var i = 0; i < this.carList.length; i++) {
                        this.carList[i].check = false
                        this.getAllNum()
                        this.getAllprice()
                    }
                }
            }
        }
    })
</script>
